<template>
    <div>

        <h1>管理员登录</h1>
        <br>
        <a href="/">房号信息显示</a> 
        <table class="table"> 
            <tbody>
                <tr>
                    <td>房号</td>
                    <td><input type="text" v-model="data.houseNum"></td>
                </tr>
                 <tr>
                    <td>房号创建人</td>
                    <td><input type="text" v-model="data.houseName"></td>
                </tr>
                 <tr>
                    <td>状态</td>
                    <td>
                        <input type="checkbox" v-model="data.state" checked>选中为启用,未选中为禁用
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="imgurl">
                        <img :src="'https://localhost:7145/'+data.imgUrl" style="height: 60px; width: 60px;">
                    </td>
                </tr>
                
                <tr>
                    <td colspan="2"><input type="button" value="添加" @click="login"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router=useRouter();

const imgurl=(e:any)=>{
  var f = e.target.files[0];
  var fs = new FormData();
  
  fs.append("file",f);
  debugger
  axios.post("/api/ImgUrl/ImgHouse",fs).then(res=>{
    data.value.imgUrl=res.data
  })

}

const data=ref({
  "id": 0,
  "houseNum": "",
  "houseName": "",
  "state": true,
  "imgUrl": "string"
})
const login =()=>{
    axios.post("/api/House/Add",data.value).then(res=>{
        if(res.data==-1)
    {
        alert("房号重复")
        return;
    } 
    if(res.data>0)
    {
      alert("添加成功");
      router.push({path:'/'})
    }
    })
}

</script>

<style scoped>

</style>